<template>
  <div class="flow-designer-container" v-loading="loading">
    <div class="flow-designer-header">
      <div class="header">
        <span class="back">
          <el-button size="medium" @click="formExit" circle>
            <Icon icon="ep:back" />
          </el-button>

        </span>
        <span class="recordTitle">
          <EfIcon v-bind="dsgnItem.icon" :size="20" />
          <span style="vertical-align: top; margin-left: 5px">{{ dsgnItem.name }}</span>
        </span>
      </div>
    </div>
    <div class="flow-designer-body">
      <div class="layout-body">
        <form-create :rule="rule" v-model:api="fApi" :option="options" ref="formRef" />
      </div>
    </div>
    <div class="flow-designer-footer">
      <div class="layout-footer">
        <span class="footer-left">
          <span class="footer-left-align">
            <el-checkbox v-model="formSubmitAndContinueChk"
              >继续创建时,保留本次提交的内容</el-checkbox
            >
          </span>
        </span>
        <span class="footer-center">
          <span class="recordOperator">
            <el-button size="medium" @click="formDraftSave">
              {{ t('res.form.formOperationList.formDraftSave') }}
            </el-button>
            <el-button size="medium" @click="formSubmitAndContinue">
              {{ t('res.form.formOperationList.formSubmitAndContinue') }}
            </el-button>
            <el-button size="medium" type="primary" @click="formSubmit(formExit)">
              {{ t('res.form.formOperationList.formSubmit') }}
            </el-button>
          </span>
        </span>
        <span class="footer-right">
          <span class="footer-right-text"> </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import {
  DesignerMixinData,
  useDesignerMixin,
  WebDesignerMode
} from '@/components/Designer/mixins/DesignerMixin'
import { DsgnVo } from '@/api/res/approval/vo/DsgnServiceVo'
// import {DsgnBasicVo} from "@/api/res/approval/vo/DsgnBasicVo";
// import {DsgnFormVo} from "@/api/res/approval/vo/DsgnFormVo";
// import {DsgnProcVo} from "@/api/res/approval/vo/DsgnProcVo";
// import {DsgnExtVo} from "@/api/res/approval/vo/DsgnExtVo";
import { CenterApi } from '@/api/res/ResCenter'
// import LayoutHeader from '@/components/Designer/flow/components/FlowLayoutHeader.vue'
// import ApprovalProSetting from '@/components/Designer/flow/components/ApprovalProSetting.vue'
// import FormCreateDesigner from '@/components/Designer/form/formDesigner/FormCreateDesigner.vue'
// import FlowDesigner from '@/components/Designer/flow/flowDesigner/FlowDesigner.vue'
// import FormV3Designer from '@/components/Designer/form/formDesigner/FormV3Designer.vue'
// import FormBaseSetting from '@/components/Designer/flow/components/FormBaseSetting.vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { Icon as EfIcon } from '@/components/Icon'
import { BizTypeEnum } from '@/api/crm/permission'
import { FormDataApi } from '@/api/res/FormData'
import { FormRecordVo } from '@/api/res/FormData/vo/FormRecordVo'
import DesignerExit from "@/components/Designer/common/DesignerExit.vue";

const props = defineProps({
  propMixin: Object as PropType<DesignerMixinData>
})
const useDesigner = useDesignerMixin(props.propMixin)
const formRef = ref()
const fApi = ref(null)

const { t } = useI18n()
const dsgnItem = props.propMixin.dsgnItem
const actionItem = props.propMixin.actionItem

const formSubmitAndContinueChk = ref(false)

// const designerVo = ref<DsgnVo>(new DsgnVo())
// const approvalBasicVo = ref<DsgnBasicVo>(new DsgnBasicVo())
// const approvalFormVo = ref<DsgnFormVo>(new DsgnFormVo())
// const approvalExtVo = ref<DsgnExtVo>(new DsgnExtVo())

const loading = ref(true)
const rule = ref([])
const resModelRef = ref(null)
const options = ref({
  // onSubmit: (formData) => {
  //   alert(JSON.stringify(formData))
  // },
  submitBtn: false,
  resetBtn: false
})

onMounted(async () => {
  await loadInitData()
  loading.value = false
})

const message = useMessage() // 消息弹窗

const formSubmit = async (resp) => {
  loading.value = true
  fApi.value.submit((formData, fApi) => {
    // const previewFormRef = this.formRef;
    // formRef.value.submit()
    const formRecordVo = new FormRecordVo()
    formRecordVo.resId = dsgnItem.id
    formRecordVo.formData = formData
    // const resModel = await CenterApi.getDsgnById(useDesigner.getResId())
    FormDataApi.formSubmitReg(formRecordVo)
      .then((res) => {
        message.success('保存成功')
        if (resp) {
          resp(res)
        }
      })
      .finally(() => {
        loading.value = false
      })
  })
}



const formSubmitAndContinue=() => {
  formSubmit(()=>{
    if (!formSubmitAndContinueChk.value) {
      fApi.value.resetFields()
    }
  })
}


const formDraftSave = () => {
  fApi.value.validate((valid) => {
    if (valid) {
      fApi.value.resetFields()
      message.success('保存成功')
    } else {
      message.error('请检查输入项')
    }
  })
}


const emit = defineEmits(['exitEvent'])
//表单退出、返回
const formExit = () => {
  fApi.value.resetFields()
  emit('exitEvent')
}

const loadInitData = async () => {
  const resId = useDesigner.getResId()
  if (resId) {
    const resModel = await CenterApi.getDsgnById(useDesigner.getResId())
    resModelRef.value = resModel
    // designerVo.value = resModel
    rule.value = resModel.form.configJson.widgetList
    // options.value = resModel.form.configJson.formConfig
    // designerModel.value.form = resModel.form
    // designerModel.value.proc = resModel.proc
    // designerStore.designerModel = designerModel.value
    // dsgnModelId.value = resModel.basic.dsgnId
  }
}
</script>

<style lang="scss" scoped>
.flow-designer-header {
  width: 100%;
}

.flow-designer-body {
  min-height: calc(100vh - 150px);
  position: relative;
  border-radius: 5px;
}

.layout-body,
.layout-footer {
  max-width: 1200px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 10px auto; /* 使整个容器水平居中 */
  position: relative;
}

.header {
  display: flex;
  justify-content: space-between; /* 将 back 和 recordTitle 分别推到两端 */
  align-items: center;
  width: 100%;
  margin: 10px 0; /* 头部居中 */
}

.back {
  margin-right: auto; /* 确保 back 在左边 */
}

.footer-left-align {
  position: absolute;
  left: 10px; /* 居左对齐 */
}

.flow-designer-footer {
  width: 100%;

  .layout-footer {
    justify-content: right;
  }

  .footer-left {
    justify-content: left;
  }

  .footer-center {
    display: flex;
    //justify-content: right; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: 10px 10px; /* 使整个容器水平居中 */
  }
}

.recordTitle {
  flex: 1; /* 使 recordTitle 占据中间空间 */
  text-align: center; /* recordTitle 内容居中 */
}

.recordOperator .el-button {
  min-width: 90px; /* 使按钮宽度一致 */
}
</style>
